<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-内容渲染指令</title>
<!--    导入vue的库文件 在 window 全局就有了 Vue 这个构造函数-->
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<!--    希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部-->
<div id="app">
  <p v-text="username"></p>
  <p>性别:{{sex}}</p>

    <hr>
<!--    以下两种方法 被渲染成了普通的字符串 并没有解析h4标签-->
    <div v-text="info"></div>
    <div>{{info}}</div>

    <hr>
    <div v-html="info"></div>

</div>

<script>
    //创建vue的实例对象
    const vm = new Vue({
    // el 属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
        el:'#app',
        // data 对象就是要渲染到页面上的数据
        data:{
            username:'张三',
            sex:'女',
            info:'<h4 style="color:red; font-weight: bold">欢迎大家来学习 vue.js</h4>'
        }
    });
</script>
</body>
</html>